<template>
	<div class="system-user-dialog-container">
		<el-dialog :title="state.ruleForm.id ? '编辑' : '添加'" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="dialogFormRef" :model="state.ruleForm" size="default" label-width="90px" :rules="rules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="用户姓名" prop="name">
							<el-input v-model="state.ruleForm.name" placeholder="请输入用户姓名" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="部门" prop="department">
							<el-select v-model="state.ruleForm.department" placeholder="请选择部门" clearable class="w100">
								<el-option v-for="item in state.deptData" :key="item.id" :label="item.deptName" :value="item.deptName" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="手机号" prop="mobile">
							<el-input v-model="state.ruleForm.mobile" placeholder="请输入手机号" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="登录账号" prop="loginUser">
							<el-input v-model="state.ruleForm.loginUser" placeholder="请输入登录账号" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="!state.ruleForm.id">
						<el-form-item label="登录密码" prop="loginPwd">
							<el-input v-model="state.ruleForm.loginPwd" placeholder="请输入登录密码" type="password" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="关联角色" prop="roleid">
							<el-select v-model="state.ruleForm.roleid" placeholder="请选择关联角色" clearable class="w100">
								<el-option v-for="item in state.roleData" :key="item.id" :label="item.roleName" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="用户状态">
							<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁" :active-value="1" :inactive-value="2"></el-switch>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemUserDialog">
// 后台接口
import { systemApi } from '/@/api/system/index';

// 表单验证
const rules = reactive({
	name: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }],
	roleid: [{ required: true, message: '请选择关联角色', trigger: 'change' }],
	loginUser: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
	loginPwd: [
		{ required: true, message: '请输入登录密码', trigger: 'blur' },
		{ min: 6, message: '密码至少为6位', trigger: 'blur' },
	],
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const state = reactive({
	ruleForm: {
		id: '', //id
		name: '', // 用户姓名
		department: '', // 部门
		mobile: '', // 手机号
		email: '', // 邮箱
		loginUser: '', // 账户名称
		loginPwd: '', // 账户密码
		roleid: '', // 关联角色
		status: 1, // 用户状态
		createBy: '' //操作用户id
	},
	deptData: <any>[], // 部门数据
	roleData: <any>[], // 角色数据
	dialog: {
		isShowDialog: false,
	},
});

// 打开弹窗
const openDialog = (type: string, row: RowUserType) => {
	state.dialog.isShowDialog = true;
	nextTick(() => {
		dialogFormRef.value.resetFields();  // 清空表单并移除校验结果，此项需加表单验证才能使用
		if (type === 'edit') {
			state.ruleForm = JSON.parse(JSON.stringify(row));
		}else{
			state.ruleForm = {
				id: '', //id
				name: '', // 用户姓名
				department: '', // 部门
				mobile: '', // 手机号
				email: '', // 邮箱
				loginUser: '', // 账户名称
				loginPwd: '', // 账户密码
				roleid: '', // 关联角色
				status: 1, // 用户状态
				createBy: '' //操作用户id
			}
		}
	})
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = async () => {
	// 表单验证
	await dialogFormRef.value?.validate(async (valid: any) => {
		if (valid) {
			// 保存到数据库
			// state.ruleForm.createBy = store.state.userInfos.userInfos.id; //操作用户id
			let res: any = await systemApi().addUser(state.ruleForm);
			if (res.success) {
				if (res.datas.msg) {
					ElMessage.warning(res.datas.msg);
					return;
				} else {
					emit('refresh');
					ElMessage.success(state.ruleForm.id ? '编辑成功' : '添加成功');
				}
			} else {
				ElMessage.error(state.ruleForm.id ? '编辑失败' : '添加失败');
			}
			closeDialog();
		}
	});
};
// 初始化部门数据
const initDeptData = async () => {
	let res: any = await systemApi().getDepartmentList();
	state.deptData = res.datas;
};
// 初始化角色数据
const initRoleData = async () => {
	let res: any = await systemApi().getRoleListNopage();
	state.roleData = res.datas;
};
// 页面加载时
onMounted(() => {
	initDeptData();
	initRoleData();
});

// 暴露变量
defineExpose({
	openDialog,
});
</script>
